<template>
  <div class="whole">
    <div class="crumbs">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in $route.matched" :key="index">
          <span v-if="index+1 < $route.matched.length">{{ item.meta.title }}</span>
          <router-link v-if="index+1 == $route.matched.length" :to="item.path">{{ tableName }}</router-link>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div
      class="returnPrevious"
      @click="returnToPrevious"
    >
      <a-icon type="left" />
      返回
    </div>
    <a-table
      :class="TableAdmin"
      class="columnListTable"
      rowKey="id"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
    > 
        <a slot="tableName" slot-scope="text, record" href="/columnList">{{ record.tableName }}</a>
      <span slot="num" slot-scope="text, record, index">
        {{ (pageNum - 1) * pageSize + parseInt(index) + 1 }}
      </span>
    </a-table>
    <div class="Loading" v-show="Loading">
      <a-spin tip="Loading..."></a-spin>
    </div>
  </div>
</template>

<script>
import api from '../../api/dataBase/dataBase.js'
export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: { customRender: "num" },
          width:78
        },
        {
          title: "列名",
          dataIndex: "columnName",
          scopedSlots: { customRender: "columnName" },
          width:150
        },
        {
          title: "数据类型",
          dataIndex: "dataType",
          scopedSlots: { customRender: "dataType" },
          width:78
        },
        {
          title: "长度",
          dataIndex: "maxLength",
          scopedSlots: { customRender: "maxLength" },
          width:78
        },
        {
          title: "列注释",
          dataIndex: "columnComment",
          scopedSlots: { customRender: "columnComment" },
          width:200
        },
        {
          title: "类型",
          dataIndex: "columnType",
          scopedSlots: { customRender: "columnType" },
          width:78
        },
        {
          title: "主键",
          dataIndex: "columnKey",
          scopedSlots: { customRender: "columnKey" },
          width:78
        },
      ],
      Loading: false,
      data: [],
      pageNum: 1,
      pageSize: 9999999,
      pagination: {
        total: 0,
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSizeOptions: ["5", "10", "15", "20"],
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
      },
      tableName:'',
      TableAdmin:'TableAdmin',
    };
  },
  mounted() {
    let _this = this;
    this.getColumnList();  
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.TableAdmin='TableAdmin';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.TableAdmin='TableAdmin1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.TableAdmin='TableAdmin';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.TableAdmin='TableAdmin1';
    }
  },
  methods: {
    onChange(pageNumber) {
      console.log("Page: ", pageNumber);
    },
    getColumnList() {
      let _this = this;
      _this.Loading = true;
      this.tableName = this.$router.currentRoute.query.tableName;
      let tableName = this.$router.currentRoute.query.tableName;
      console.log(_this)
      api.getColumnList(null,tableName).then(res=>{
        _this.Loading = false;
          if (res.code == 200) {
            _this.data = res.data;
            _this.data.forEach((e,v)=>{
              if(e.columnKey == "PRI") {
                e.columnKey = '是'
              }
            })
          }
      })
    },
    returnToPrevious(){
      this.$router.go(-1);//返回上一层
    }
  },
};
</script>

<style lang="scss" scoped>
.whole {
  position: relative;
  .crumbs {
    display: flex;
    padding-left: 31px;
    margin-top: 14px;
    a,
    area,
    button,
    [role="button"],
    input:not([type="range"]),
    label,
    select,
    summary,
    textarea,
    .ant-breadcrumb {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #4d4d4d;
    }
    .ant-breadcrumb > span:last-child a {
      font-family: MicrosoftYaHei;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #1e7eff;
    }
  }
  .returnPrevious {
      margin-right: 15px;
      color: #0078B6;
      width: 60px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      cursor: pointer;
      position: absolute;
      right: 350px;
      top: 20px;
    }
    .returnPrevious:hover {
      color: #3fbfff;
    }
  .Loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .columnListTable {
    margin-left: 25px;
    width: 1560px;
    background: #FFFFFF;
    border: 1px solid #C4D7E1;
    border-radius: 6px;
    margin-top: 30px;
  }
}
</style>
<style>
  .columnListTable {
      position: relative !important;
    }
</style>